<template>
  <div style="display: flex; flex-wrap: wrap; gap: 100px">
    <div>
      <p>第七题</p>
      <div class="seven" :class="{ default: isdefult, primary: isprimary, danger: isdanger }">
        <h1>标题</h1>
        <p :style="fh">{{ fh }}</p>
        <input type="button" :class="{ idd: isdefult, ipp: isprimary, idn: isdanger }" value="切换主题" @click="dpdfn" />
      </div>
      <input type="text" v-model="ifh" />
    </div>
    <div>
      <p>第八题</p>
      <div :class="navclass" :style="navstyle">导航栏</div>
    </div>
    <div>
      <p>第九题</p>
      <h1>商品列表</h1>
      <table>
        <thead>
          <tr>
            <th>图片</th>
            <th>名称</th>
            <th>库存</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(shop, index) in shops" :key="shop.shopImg">
            <td>{{ shop.shopImg }}</td>
            <td>{{ shop.shopName }}</td>
            <td>{{ shop.shopstoke }}</td>
            <td><input :style="btnstyle[index]" :class="btnshow[index]" v-if="showbtn" type="button" value="购买"
                @click="btni(index)"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from 'vue'

//第七题
let isdefult = ref(true)
let isprimary = ref(false)
let isdanger = ref(false)
let ifh = ref('')
let fh = computed(() => {
  return { lineHeight: ifh.value + 'px' }
})
function dpdfn() {
  if (isdefult.value == true) {
    isdefult.value = false
    return (isprimary.value = true)
  } else if (isprimary.value == true) {
    isprimary.value = false
    return (isdanger.value = true)
  } else if (isdanger.value == true) {
    isdanger.value = false
    return (isdefult.value = true)
  }
}
//第八题
let navclass = ref('nav-desktop')
let navstyle = reactive({
  backgroundColor: '#333',
  color: '#fff',
})
function upwidth() {
  let winwidth = window.innerWidth
  if (winwidth > 600) {
    navclass.value = 'nav-desktop'
      ; (navstyle.backgroundColor = '#333'), (navstyle.color = '#fff')
  } else {
    navclass.value = 'nav-mobile'
      ; (navstyle.backgroundColor = '#fff'), (navstyle.color = '#000')
  }
}
onMounted(() => {
  upwidth()
  window.addEventListener('resize', upwidth)
})
//第九题
let shops = reactive([
  {
    shopImg: 1,
    shopName: 'a',
    shopstoke: 2,
  },
  {
    shopImg: 2,
    shopName: 'b',
    shopstoke: 10,
  },
  {
    shopImg: 3,
    shopName: 'c',
    shopstoke: 7,
  }
])
let showbtn = ref(true)
let btnshow = reactive([
  {
    'in-stock': true,
    'out-of-stock': false
  },
  {
    'in-stock': true,
    'out-of-stock': false
  },
  {
    'in-stock': true,
    'out-of-stock': false
  }
])
let btnstyle = reactive([
  {
    backgroundColor: '#00ff00'
  },
  {
    backgroundColor: '#00ff00'
  },
  {
    backgroundColor: '#00ff00'
  },
])
function btni(index) {
  shops[index].shopstoke--
  if (shops[index].shopstoke === 0) {
    btnshow[index]['in-stock'] = false
    btnshow[index]['out-of-stock'] = true
    btnstyle[index].backgroundColor = '#ff0000'
  }
}
</script>
<style scoped>
.seven {
  width: 400px;
  height: 200px;
  background-color: antiquewhite;
}

.default {
  background-color: aquamarine;
  color: blueviolet;
}

.primary {
  background-color: blueviolet;
  color: aquamarine;
}

.danger {
  background-color: brown;
  color: pink;
}

.idd {
  background-color: red;
}

.ipp {
  background-color: blue;
}

.idn {
  background-color: yellow;
}

table,
th,
td,
tr {
  border: 1px solid;
  border-collapse: collapse;
}
</style>
